<template>
	<view>
		<!-- 收银台 -->
		<view class="edgeInsetTop"></view>
		<view class="wanl-pay">
			<view class="price-box">
				<text class="text-df">{{order_no}}</text>
				<text class="wanl-pip text-price margin-top-sm">{{price}}</text>
			</view>
			<view class="list-box">
				<view class="item" v-for="(item, index) in payList" :key="index">
					<text :class="'wlIcon-'+ item.type +'-pay'"></text>
					<view class="action">
						<text class="title wanl-pip">{{item.name}}</text>
						<view v-if="item.type == 'gold'">
							<text>剩余 {{yuanbaoYuE}}</text>
						</view>
						<view v-if="item.type == 'balance'">
							<text v-if="isbalance">可用余额 ￥{{user.money}}</text>
							<text v-else>余额不足，可用余额 ￥{{user.money}}</text>
						</view>
						<view v-else>{{item.describe}}</view>
					</view>
					<view class="radio text-xxl" v-if="item.state" @tap="onSelect(index)">
						<text v-if="item.select" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="radio text-xxl" v-else>
						<text class="wlIcon-xuanze-danxuan wanl-gray-light"></text>
					</view>
				</view>
			</view>
			<view v-if="disabled">
				<button class="mix-btn wanl-bg-redorange"> <text class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text>正在支付中... </button>
			</view>
			<view v-else>
				<button v-if="payNum == 1" class="mix-btn wanl-bg-redorange" @tap="confirm()"> 确认支付 </button>
				<button v-else class="mix-btn wanl-bg-redorange" @tap="confirm()"> 合并支付 </button>
			</view>
			<view class="footer text-center">
				<view class="text-sm" v-if="order_pay_no">{{order_type === 'groups' ? '拼团':''}}交易号：{{order_pay_no}}</view>
				<view> © 万联支付</view>
			</view>
		</view>
		<wanl-modal custom :show="attendanceModalVisible">
			<view class="attendance-modal">
				<view class="modal-header">
					<!--					<image :src="$wanlshop.appstc('/common/cup.png')" mode="widthFix"></image>-->
				</view>
				<view class="modal-content text-sm wanl-gray" style="font-size: 30rpx;color:#333333;text-align: justify;line-height: 48rpx">
					<view>{{ `请在神话 APP 转账${jinyuanbao}金元宝至${phoneConfig}` }}</view>
				</view>
				<view class="modal-btn" style="    display: flex;
    justify-content: center;"><button class="cu-btn wanl-bg-redorange round lg text-sm" style="    width: 80%;
    margin: 20px 0 0 0;" @tap="attendanceModalVisible = false;">我知道了</button></view>
			</view>
		</wanl-modal>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			token: '',
			disabled: false,
			price: '0.00',
			jinyuanbao:'0.00',
			isbalance: false,
			isJinyuanbao:true,
			order_type: 'goods',
			order_no: '',
			order_pay_no: '',
			payNum: 1, // 支付方式 独立支付-合并支付
			payList: [],
			order_data:[],
			attendanceModalVisible:false,
			zhifuData:null,
			phoneConfig:'',
			yuanbaoYuE:''
		}
	},
	computed: {
		...mapState(['user'])
	},
	watch: {
		price(val, newval) {
			if (val <= parseFloat(this.$store.state.user.money)) {
				this.isbalance = true;
				this.getPayment();
			}
			if (val <= parseFloat(this.jinyuanbao)) {
				// this.isJinyuanbao = true;
			}
		}
	},
	async onLoad(option) {
		this.getConfig();
		await uni.request({
			url:'/wanlshop/user/profile',
			method: 'POST',
			data:{
			},
			success:(res)=>{
				console.log("===信息。",res);
				this.yuanbaoYuE = res.data.yuanbao;
				uni.setStorageSync("yuanbao",res.data.yuanbao)
			}
		});
		await uni.request({
			url: '/wanlshop/pay/getBalance',
			method: 'POST',
			success: res => {
				this.$store.commit('user/setUserInfo', { money: res.data });
				// 获取支付列表
				this.getPayment();
			}
		});
		if (option.data) {
			var sum = 0,
			    goldSum=0,
			    data = JSON.parse(option.data),
			    order_ids = [];
			this.order_data = data;
			if (data.length <= 1) {
				this.price = data[0].price;
				this.jinyuanbao = data[0].gold;
				this.order_type = data[0].type;
				this.order_no = `${data[0].type == 'groups' ? '拼团':''}订单号：${data[0].order_no}`;
				this.order_pay_no = data[0].pay_no;
				this.order_id = data[0].order_id;
			} else {
				data.forEach(item => {
					sum = this.$wanlshop.bcadd(sum, item.price);
					goldSum = this.$wanlshop.bcadd(goldSum, item.gold);
					order_ids.push(item.order_id);
				});
				this.price = sum;
				this.jinyuanbao = goldSum;
				this.order_id = order_ids;
				this.payNum = data.length;
				this.order_no = '合并支付 ' + data.length + '个订单';
			}
			this.token = option.token;
		} else if (option.order_id) {
			uni.showLoading({
				title: '结算中...'
			});
			await uni.request({
				url: '/wanlshop/pay/getPay',
				method: 'POST',
				data: {
					order_id: option.order_id,
					order_type: option.order_type
				},
				success: res => {
					uni.hideLoading();
					this.token = res.data.token;
					this.price = res.data.price;
					this.order_type = res.data.order_type;
					this.order_no = `${res.data.order_type == 'groups' ? '拼团':''}订单号：${res.data.order_no}`;
					this.order_pay_no = res.data.pay_no;
					this.order_id = res.data.order_id;
				}
			});
		} else {
			console.log('非法访问');
		}
	},
	methods: {
		getConfig(){
			var that = this;
			uni.request({
				url:'/wanlshop/user/config',
				method: 'POST',
				success:(res)=>{
					that.phoneConfig = res.data.phone
				}
			});
		},
		getPayment() {
			let method = 'wap';
			// #ifdef APP-PLUS
			method = 'app';
			// #endif
			// #ifdef MP-BAIDU
			method = 'mini';
			// #endif
			// #ifdef MP-WEIXIN
			method = 'miniapp';
			// #endif
			// #ifdef MP-ALIPAY
			method = 'mini';
			// #endif
			// #ifdef MP-QQ
			method = 'mini';
			// #endif
			
			
			this.payList = [
				{
					name: '余额支付',
					describe: '',
					type: 'balance',
					method: 'balance',
					state: this.isbalance ? true : false, // 是否可用
					select: this.isbalance ? true : false // 是否选中
				}
			];
			// #ifdef H5
			if (this.$jssdk.isWechat()) {
				this.payList.push({
						name: '公众号支付',
						describe: '推荐使用公众号支付',
						type: 'wechat',
						method: 'mp',
						state: true,
						select: this.isbalance ? false : true
					}, {
						name: '支付宝',
						describe: '',
						type: 'alipay',
						method: method,
						state: true,
						select: false
					},
					{
						name: '金元宝支付',
						describe: '',
						type: 'gold',
						method: 'gold',
						state: this.isJinyuanbao? true : false, // 是否可用
						// this.isJinyuanbao? true :
						select:  false, // 是否选中
					},
					// {
					// 	name: '组合支付',
					// 	describe: '使用支付宝支付/微信支付+金元宝支付',
					// 	type: 'mixZhifu',
					// 	method: 'mixZhifu',
					// 	state: true,
					// 	select: false
					// }
				);
			} else {
				this.payList.push({
						name: '支付宝',
						describe: '使用支付宝支付',
						type: 'alipay',
						method: method,
						state: true,
						select: false
					}, {
						name: '微信支付',
						describe: '使用微信支付',
						type: 'wechat',
						method: method,
						state: true,
						select: this.isbalance ? false : true
					},
					{
						name: '金元宝支付',
						describe: '',
						type: 'gold',
						method: 'gold',
						state: this.isJinyuanbao? true : false, // 是否可用
						// this.isJinyuanbao? true :
						select:  false, // 是否选中
					},
					// {
					// 	name: '组合支付',
					// 	describe: '使用支付宝支付/微信支付+金元宝支付',
					// 	type: 'mixZhifu',
					// 	method: 'mixZhifu',
					// 	state: true,
					// 	select: false
					// }
				);
			}
			// #endif
			// #ifndef H5
			uni.getProvider({
				service: "payment",
				success: (e) => {
					e.provider.map((value) => {
						if (value == 'alipay') {
							this.payList.push({ name: '支付宝', describe: '', type: value, method: method, state: true, select: false });
						} else if (value == 'wxpay') {
							this.payList.push({ name: '微信支付', describe: '推荐使用微信支付', type: 'wechat', method: method, state: true, select: this.isbalance ? false : true });
						} else if (value == 'baidu') {
							this.payList.push({ name: '百度收银台', describe: '', type: value, method: method, state: true, select: false });
						} else if (value == 'appleiap') {
							this.payList.push({ name: 'Apple支付', describe: '', type: 'apple', method: method, state: true, select: false });
						}
					})
				}
			});
			// #endif
		},
		//确认支付
		confirm() {
			let data = null;
			if (this.disabled) {
				return;
			}
			this.payList.map((value, index, array) => {
				if (value.select) {
					data = value;
				} else {
					return;
				}
			});
			// 判断支付是否存在
			if (!data) {
				uni.showModal({
					content: "请选择支付方式",
					showCancel: false
				});
				return;
			} else {
				this.disabled = true;
				// 获取小程序code
				// #ifdef MP
				uni.login({
					success: (e) => {
						this.wanlPay(data, e.code);
					},
					fail: (e) => {
						uni.showModal({
							content: "无法获取微信code,原因为: " + e.errMsg,
							showCancel: false
						})
					}
				})
				// #endif
				// #ifndef MP
				// 如果是公众号获取code
				debugger
				if(data.type == 'mixZhifu'){
					this.$wanlshop.to(`/pages/apps/jinyuanbao/shangpin/combinedPayment?token=${uni.getStorageSync("wanlshop:user").token}&data=${JSON.stringify(this.order_data)}`);
					
				}else if(data.type == 'gold'){
					this.zhifuData = data;
					this.creatOrder();
				}else{
					this.wanlPay(data);
				}
				// #endif
			}
		},
		creatOrder(){
			var that = this;
			that.wanlPay(this.zhifuData);
		},
		async wanlPay(data, code = null) {
			await uni.request({
				url: '/wanlshop/pay/payment',
				method: 'POST',
				data: {
					order_type: this.order_type,
					type: data.type,
					method: data.method,
					code: code,
					order_id: this.order_id,
					token: this.token
				},
				success: res => {
					// 余额支付/小程序支付
					if(res.res.code == '1'){
						switch (data.type) {
							case 'balance':
								this.$store.commit('user/setUserInfo', {
									money: this.$wanlshop.bcsub(this.$store.state.user.money, this.price)
								});
								this.paySuccess();
								break;
							case 'gold':
								if(parseFloat(this.$store.state.user.yuanbao)< parseFloat(this.jinyuanbao)){
									this.attendanceModalVisible = true;
								}else{
									this.$store.commit('user/setUserInfo', {
										yuanbao: this.$wanlshop.bcsub(this.yuanbaoYuE, this.jinyuanbao)
									});
									uni.setStorageSync("yuanbao",this.$wanlshop.bcsub(this.yuanbaoYuE, this.jinyuanbao))
									this.paySuccess();
								}
								
								break;
							case 'wechat':
								// 微信 H5支付
								if (data.method == 'wap') {
									setTimeout(() => {
										uni.showModal({
											content: '请确认微信支付是否已完成',
											confirmText: '已完成',
											cancelText: '重新支付',
											success: response => {
												if (response.confirm) {
													this.paySuccess();
												} else if (response.cancel) {
													this.confirm();
												}
											}
										});
									}, 2000);
									// 异步查询是否支付成功
									window.location.href = res.data;
									// 微信 APP支付
								} else if (data.method == 'app') {
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: res.data,
										success: (e) => {
											console.log("success", e);
											this.paySuccess();
										},
										fail: (e) => {
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.disabled = false;
										}
									})
									// 微信 小程序支付
								} else if (data.method == 'miniapp') {
									uni.requestPayment({
										appId: res.data.appId,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										success: (e) => {
											this.paySuccess();
										},
										fail: (e) => {
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										}
									})
									// 微信 公众平台支付
								} else if (data.method == 'mp') {
									this.$jssdk.wxpay({
										data: res.data,
										success: e => {
											this.paySuccess();
										},
										fail: err => {
											if (err.errMsg == "chooseWXPay:ok") {
												this.$wanlshop.msg('支付成功');
											} else if (err.errMsg == "chooseWXPay:cancel") {
												this.$wanlshop.msg('支付失败，取消支付');
											} else if (err.errMsg == "chooseWXPay:fail") {
												this.$wanlshop.msg('支付失败');
											}
										}
									})
								}
								break;
							case 'alipay':
								if (data.method == 'wap') {
									
									if (this.$jssdk.isWechat()) {
										//微信内支付宝wep支付
										console.log("=====支付宝支付")
										const paydata = {
											url:res.data,
											price:this.price,
											order_id:this.order_id,
											order_type:this.order_type,
											payNum:this.payNum,
										}
										console.log("===paydata",paydata)
										uni.navigateTo({
											url:`alipay?url=${encodeURIComponent(JSON.stringify(paydata))}`
										})
										
									} else {
										//浏览器支付宝支付
										this.disabled = false;
										if (this.order_type === 'goods') {
											this.$store.commit('statistics/order', {
												pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
												delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
											});
										}
										document.write(res.data);
									}
									
									
								} else if (data.method == 'app') {
									uni.requestPayment({
										provider: 'alipay',
										orderInfo: res.data,
										success: (e) => {
											console.log("success", e);
											this.paySuccess();
										},
										fail: (e) => {
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.disabled = false;
										}
									})
								}
								break;
						}
					}else if( data.type == 'gold' && res.res.code!='1'){
						this.attendanceModalVisible = true;
					}else{
						uni.showModal({
							content: "支付失败,原因为: " + res.res.msg,
							showCancel: false
						})
					}
				
				}
			});
		},
		onSelect(key) {
			this.payList.map((value, index, array) => {
				if (index == key) {
					value.select = !value.select;
				} else {
					value.select = false;
				}
			});
		},
		// 支付成功
		paySuccess() {
			this.disabled = false;
			if (this.order_type === 'goods') {
				this.$store.commit('statistics/order', {
					pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
					delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
				});
			}
			this.$wanlshop.to(`/pages/page/success?type=pay&order_type=${this.order_type ? this.order_type:'goods'}`);
		}
	}
}
</script>

<style>
page {
	background-color: white;
}

radio-group {
	display: block;
}
.wlIcon-gold-pay{
	width: 36px;
	height:36px;
	font-size: 32px;
	margin: 11px 0px;
	background: url("https://d-shenhuashop.bigchun.com/h5test/yuanbao/shangpin/jinyuanbao.png") no-repeat center;
	background-size: 90%;
	background-position-x: -3px;
}
.wlIcon-mixZhifu-pay{
	width: 36px;
	height: 36px;
	font-size: 32px;
	margin: 11px 0px;
	background: url("https://d-shenhuashop.bigchun.com/h5test/yuanbao/shangpin/zuhe.png") no-repeat center;
	background-size: 90%;
	background-position-x: -3px;
}
</style>